<template>
  <div class="login-page-container">
    <el-form class="login-form">
      <h2 class="title">{{ is_login ? '登录' : '注册' }}</h2>
      <el-form-item v-if="!is_login">
        <el-input placeholder="请输入用户名" size="large" v-model="form.user_name"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input placeholder="请输入手机号" size="large" v-model="form.phone"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input placeholder="请输入密码" size="large" v-model="form.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="submitForm">{{ is_login ? '提交' : '注册' }}</el-button>
        <div class="text-row">
          <span class="text-wrap" @click="is_login = !is_login">
            <span>{{ is_login ? '没有账号？去注册' : '已有账号？去登陆' }}</span>
          </span>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';



export default defineComponent({
  name: 'Login',
  setup() {
    const is_login = ref(true);
    const form = ref({
      user_name: '',
      phone: '',
      password: ''
    });

    const submitForm = () => {

    };



    return {
      is_login,
      form,
      submitForm
    };
  }
});


</script>
<style lang="less" scoped>
.login-form {
  width: 360px;
  background: #fff;
  padding: 30px 50px 10px 50px;
  border-radius: 7px;
  margin: 20px auto;
  box-shadow: var(--el-box-shadow);

  .title {
    text-align: center;
    margin-bottom: 18px;
  }
}
</style>